<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="fn">点我</button>
    <input v-focus type="text" v-model="str">
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            str:"今天很开心！"
        },
        methods:{
            fn(){
                this.str += "!"
                document.querySelector("input").focus();
            }
        },
        directives:{
            // focus(el){
            // 	console.log("focus",document.querySelector("input").value,3)
            // 	el.focus();
            // },
            focus:{
                inserted(el){
                    console.log("inserted",document.querySelector("input").value,3)
                    el.focus();
                }
            }
        },
        beforeMount(){
            console.log(document.querySelector("input").value,1)
        },
        mounted(){
            // document.querySelector("input").focus();
            console.log(document.querySelector("input").value,2)
        }
    })
</script>
</html>